<template>
	<view :class="[userIdentity >= 0 ? 'page-view-tabbar' : 'page-view', backgroundImage ? 'bac-def' : 'bac-f2' ]" :style="'background-image:url(' + backgroundImage +')' ">
		<view class="up-navbar-view" v-show="!hidden">
			<up-navbar :title="title" @leftClick="leftClick" :bgColor='backgroundColor' :titleStyle='navTitleStyle' :leftIcon='leftIcon'></up-navbar>
		</view>
		<slot></slot>
		<custom-tabbar v-show="userIdentity >= 0" :userIdentity='userIdentity' />
	</view>
</template>

<script setup>
	import { onLoad, onShow, onReachBottom, onPullDownRefresh, onHide, onPageScroll } from '@dcloudio/uni-app';
	import { ref, computed } from 'vue';
	import { initStatusBarHeight } from "@/until/tools.js"
	const navbarHeight = computed(() => {
		const statusBarHeight = initStatusBarHeight();
		return (statusBarHeight) || 200;
	});
	// 
	const navTitleStyle = ref({
		// color: '#000000'
		// width:'726rpx',
		// "text-align":'left',
		// "margin-left":'24rpx'
	})
	const props = defineProps({
		// tabbar坐标
		userIdentity: {
			type: Number,
			default: -1
		},
		// 标题
		title: {
			type: String,
			default: "暂无标题"
		},
		backgroundImage: {
			type: String,
			default: null // https://oss.jtmckj.com/wmp/images/common/i_another_bg.png
		},
		leftIcon: {
			type: String,
			default: 'arrow-left'
		},
		autoBack: {
			type: Boolean,
			default: true
		},
		leftClick:{
			type:Function,
			default:()=>{
				const pages = getCurrentPages();
				console.log(pages);
				if (pages.length > 1) {
					uni.navigateBack();
				} else {
					uni.reLaunch({
						url: '/pages/home/index'
					})
				}
			}
		},
		// 背景颜色
		backgroundColor: {
			type: String,
			// default: "transparent"
			default: "#f2f2f2"
		},
		// 是否隐藏头部
		hidden: {
			type: Boolean,
			default: false
		},
		// // 布局方式
		// layout: {
		// 	type: String,
		// 	default: "center"
		// },
		// // 文字颜色
		// color: {
		// 	type: String,
		// 	default: 'red' // env.cssVars.textColorWhite
		// }, 
		// // 是否有边框
		// hasBorder: {
		// 	type: Boolean,
		// 	default: false
		// }, 
		// backFn: {
		// 	default: Function,
		// },
		// backHome: {
		// 	type: Boolean,
		// 	default: false
		// },
		showSearch: {
			type: Boolean,
			default: false
		}
	});
	onShow(() => {
		// 根据接口返回的类型去替换背景颜色跟其它等
		// let testTheme = { 'type': '001', 'color': 'red', 'bac': 'blue' } // store.SetThemeInfo(testTheme) store.themeInfo.xxx
		// document.documentElement.style.setProperty('--navbacgroundcolor', '#ffffff');
		// console.log('onShow! onShow  ..')
	})
</script>

<style scoped lang="scss"> 
	.page-view-tabbar {
		// height: calc(100vh - 100rpx);
		// width: 100vw;
		// overflow-y: scroll;
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
	}

	.page-view {
		height: 100vh;
		width: 100vw;
		overflow-y: scroll;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.bac-def {
		background-color: var(--testbaccolor2);
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.bac-f2 {
		background-color: #f2f2f2;
		width: 100vw;
		height: 100vh;
	}
	
	// h5的此高度是固定的
	.up-navbar-view {
		height: 44px;
		// background-color: red; 
	}
</style>